<template>
	<div id="app">
		<div id="nav" v-show="$route.name!=='Cash'&&$route.name!=='Deposit'
	&&$route.name!=='Alipay'&&$route.name!=='WechatWallet'
	&&$route.name!=='Credit'&&$route.name!=='AntCheckLater'
	&&$route.name!=='Cardcolor'&&$route.name!=='EditAccount'">
			<div class="bottom-div" @click="flag=1,change()">
				<router-link to="/">
					<img :src="tab1" alt="" class="bottom-ico">
					<p>记账</p>
				</router-link>
			</div>
			<div class="bottom-div" @click="flag=2,change()">
				<router-link to="/Zichan">
					<img :src="tab2" alt="" class="bottom-ico">
					<p>资产</p>
				</router-link>
			</div>
			<div class="bottom-div" @click="flag=3,change()">
				<img :src="tab3" alt="" class="bottom-ico">
				<router-link to="/LeaveMessage">
					<p>交流</p>
				</router-link>
			</div>
			<div class="bottom-div" @click="flag=4,change()">
				<router-link :to="this.$store.state.user_id == '' ? '/PreLogin':'/MyInfo'">
					<img :src="tab4" alt="" class="bottom-ico">
					<p>我的</p>
				</router-link>
			</div>

		</div>
		<router-view />
	

	</div>
<!-- 
phone: 13599794895
password: wxh748159
 -->
</template>
<script>
	// @ is an alias to /src

	export default {
		name: 'Home',
		components: {
			

		},
		data() {
			return {
				flag: 1,
				// user_id:'',
				tab1:require("./assets/icon/un_tab1.png"),
				tab2:require("./assets/icon/un_tab2.png"),
				tab3:require("./assets/icon/un_tab3.png"),
				tab4:require("./assets/icon/un_tab4.png"),
			}

		},
		methods:{
			clear() {
				this.tab1 = require('./assets/icon/un_tab1.png');
				this.tab2 = require('./assets/icon/un_tab2.png');
				this.tab3 = require('./assets/icon/un_tab3.png');
				this.tab4 = require('./assets/icon/un_tab4.png');
			},
			change() {
				console.log(this.flag);
				this.clear();
				 if(this.flag == 1){
					 this.tab1 = require('./assets/icon/ed_tab1.png');	
				 }else if(this.flag == 2){
					 this.tab2 = require('./assets/icon/ed_tab2.png');
				 }else if(this.flag == 3){
					 this.tab3 = require('./assets/icon/ed_tab3.png');
				 }else if(this.flag == 4){
					 this.tab4 = require('./assets/icon/ed_tab4.png');
				 }
					
				
			}
				
		},
		created(){
			this.$store.state.user_id = localStorage.getItem("user_id");
		}
	}
</script>
<style>
	html,
	body {
		height: 100%;
	}

	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;



		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
	}

	#nav {
		font-weight: bold;
		color: #2c3e50;
	}

	#nav a.router-link-exact-active {
		color: #42b983;
	}

	html,
	body {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
	}

	* {
		margin: 0px;
		padding: 0px;
		text-decoration: none;
	}

	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		position: relative;
		height: 100%;
	}

	#nav {
		bottom: 0px;
		z-index: 99999;
		height: 50px;
		width: 100%;
		display: flex;
		justify-content: space-around;
		line-height: 50px;
		color: white;
		position: fixed;
		border-top: 1px solid gainsboro;
		background: white;
	}

	#nav a.router-link-exact-active {
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		-webkit-user-select: none;
		-moz-user-focus: none;
		-moz-user-select: none;
	}

	.bottom-ico {
		width: 20px;
		height: 20px;
		margin-top: 5px;
	}

	.bottom-div {
		position: relative;
	}

	.bottom-div p {
		position: relative;
		top: -35px;
		font-size: 14px;
		color: gray;
		text-decoration: none;
	}
</style>
